<template>
	<view>
		<view class="form_split_title">教育经历</view>
		<u-field placeholder-style="color:#757575;font-size:14px !important;" v-model="education.school" required
			label="学校名称" placeholder="请填写" class="reset_after" />
		<u-field placeholder-style="color:#757575;font-size:14px !important;" v-model="education.major" required
			label="专业名称" placeholder="请填写" class="reset_after" />
		<view class="form-line u-border-bottom" @click="showPickerEdu = !showPickerEdu">
			<view class="form-field">
				<view class="label">
					取得学历
				</view>
				<view :class="education.educationName ? 'text' : 'text ac'">
					{{education.educationName ? education.educationName : '请选择'}}
				</view>
			</view>
			<u-icon class="arrow-icon" name="arrow-right"></u-icon>
		</view>

		<u-picker mode="selector" v-model="showPickerEdu" :range="columnsEdu" range-key="text"
			@confirm="onConfirmEducation" @cancel="showPickerEdu = false" />
		<view class="form-line u-border-bottom" @click="showPickerStartDate = !showPickerStartDate">
			<view class="form-field">
				<view class="label">
					入学时间
				</view>
				<view :class="education.starttime  ? 'text' : 'text ac'">
					{{education.starttime ? education.starttime : '请选择'}}
				</view>
			</view>
			<u-icon class="arrow-icon" name="arrow-right"></u-icon>
		</view>
		<u-picker v-model="showPickerStartDate" mode="time" title="选择入学时间" :end-year="maxDate" :params="dateParams"
			@confirm="onConfirmStartDate" @cancel="showPickerStartDate = false" />
		<view class="form-line u-border-bottom" @click="showPickerEndDate = !showPickerEndDate">
			<view class="form-field">
				<view class="label">
					毕业时间
				</view>
				<view :class="education.endtimeName  ? 'text' : 'text ac'">
					{{education.endtimeName ? education.endtimeName : '请选择'}}
				</view>
			</view>
			<u-icon class="arrow-icon" name="arrow-right"></u-icon>
		</view>

		<u-select v-model="showPickerEndDate" mode="mutil-column-auto" :list="columnsWage1" @confirm="onConfirmWage1">
		</u-select>
		<view class="specialty_box">
			<view class="form_split_title">自我描述</view>
			<view v-show="isSpecialtyTextArea"
				:class="isSpecialtyTextArea  && specialty == ''? 'textarea textarea-color' : 'textarea'"
				@click="handleSpecialtyTextarea">
				{{specialty ? specialty : '你可以通过描述你擅长的东西，也可以简单的介绍一下，说说你的求职目标。'}}
			</view>
			<textarea maxlength="-1" class="textarea2" v-show="!isSpecialtyTextArea" :value="specialty"
				:focus="isSpecialtyFoucus" @blur="handleSpecialtyTextarea" @input="handleInput"
				placeholder="你可以通过描述你擅长的东西，也可以简单的介绍一下，说说你的求职目标。" />
		</view>
		<view class="form_split_18"></view>
		<view style="margin: 16px;">
			<u-button shape="circle" type="primary" @click="handleSubmit">
				创建完成
			</u-button>
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	import http from '@/utils/http'
	import api from '@/api'
	export default {
		name: 'RegFormStep2',
		data() {
			return {
				isSpecialtyFoucus: false,
				isSpecialtyTextArea: true,
				maxDate: '',
				dateParams: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				},
				currentStartDate: '',
				currentEndDate: '',
				showPickerStartDate: false,
				showPickerEndDate: false,
				showPickerEdu: false,
				education: {
					school: '',
					major: '',
					starttime: '',
					endtime: '',
					endtimeName: '',
					todate: 0,
					education: '',
					educationName: ''
				},
				specialty: '',
				specialty2: '',
				isShowAddSpeBox: false,
				minDate: '',
				maxDate: ''
			}
		},
		onReady() {
			let noDate = new Date()
			this.maxDate = noDate.getFullYear()
		},
		created() {
			this.$store.dispatch('getClassify', 'education')
			this.initDate()
		},
		computed: {
			columnsEdu() {
				return this.$store.state.classifyEdu
			},
			columnsWage1() {
				return this.date()
			},
		},
		methods: {
			date() {
				const nowDate = new Date()
				const nowYear = nowDate.getFullYear()
				const minYear = nowYear - 59
				const yearArr = ['至今']
				const monthArr = []
				const monthArr1 = []
				const arr = []
				for (let i = 0; i < nowYear - minYear; i++) {
					yearArr.push((nowYear - i) + '年')
				}
				for (let j = 0; j < 12; j++) {
					var m = (j + 1) >= 10 ? (j + 1) : '0' + (j + 1)
					monthArr.push({
						value: m + '月',
						label: m + '月'
					})
					monthArr1.push('')
				}
				for (let k = 0; k < yearArr.length; k++) {
					if (yearArr[k] == '至今') {
						arr.push({
							label: yearArr[k],
							value: yearArr[k],
							children: monthArr1
						})
					} else {
						arr.push({
							label: yearArr[k],
							value: yearArr[k],
							children: monthArr
						})
					}
				}
				return arr
			},
			onConfirmWage1(values) {
				// 修改
				if (values[0].label == '至今') {
					this.education.endtime = ''
					this.education.endtimeName = '至今'
					this.education.todate = 1
				} else {
					var y = parseInt(values[0].label)
					var m = parseInt(values[1].label) >= 10 ? parseInt(values[1].label) : '0' + parseInt(values[1].label)
					this.education.endtime = y + '-' + m
					this.education.endtimeName = y + '-' + m
					this.education.todate = 1
				}
			},
			handleSpecialtyTextarea() {
				if (this.specialty2 != '') {
					this.specialty = this.specialty2
				}
				this.isSpecialtyFoucus = !this.isSpecialtyFoucus
				this.isSpecialtyTextArea = !this.isSpecialtyTextArea
			},
			handleInput(e) {
				this.specialty2 = e.detail.value
			},
			// 设置日期插件默认值
			initDate() {
				let nowDate = new Date()
				let nowYear = nowDate.getFullYear()
				let minYear = nowYear - 59
				this.minDate = new Date(minYear, 0)
				this.maxDate = nowDate
				this.currentStartDate = nowDate
				this.currentEndDate = nowDate
			},
			onConfirmStartDate(value) {
				let {
					year,
					month
				} = value
				this.education.starttime = year + '-' + month
				this.showPickerStartDate = !this.showPickerStartDate
			},
			onConfirmEducation(value) {
				let [index] = value
				this.education.education = this.columnsEdu[index].id
				this.education.educationName = this.columnsEdu[index].text
				this.showPickerEdu = !this.showPickerEdu
			},
			handleSubmit() {
				this.specialty = this.specialty2
				if (!this.education.school) {
					this.$refs.uTips.show({
						title: '请填写学校名称',
						type: 'error'
					})
					return false
				}
				if (!this.education.major) {
					this.$refs.uTips.show({
						title: '请填写专业名称',
						type: 'error'
					})
					return false
				}
				if (!this.education.education) {
					this.$refs.uTips.show({
						title: '请选择学历',
						type: 'error'
					})
					return false
				}
				if (!this.education.starttime) {
					this.$refs.uTips.show({
						title: '请选择入学时间',
						type: 'error'
					})
					return false
				}
				if (parseInt(this.education.todate) === 0) {
					if (!this.education.endtime) {
						this.$refs.uTips.show({
							title: '请选择毕业时间',
							type: 'error'
						})
						return false
					}
				}
				http.post(api.reg_resume_form_step2, {
						education: {
							school: this.education.school,
							major: this.education.major,
							starttime: this.education.starttime,
							endtime: this.education.endtime,
							todate: this.education.todate,
							education: this.education.education
						},
						specialty: this.specialty
					})
					.then(res => {
						if (parseInt(res.data.code) === 200) {
							uni.setStorageSync('toCompleteResume', false)
							uni.navigateTo({
								url: '/personal/AddResumeFinish'
							})
							this.specialty = ''
							this.specialty2 = ''
						} else {
							this.$refs.uTips.show({
								title: res.data.message,
								type: 'error'
							})
						}
					})
					.catch(err => {
						console.log(err)
					})
			}
		}
	}
</script>

<style scoped lang="scss">
	.specialty_box {
		/deep/ .u-field {
			/deep/ .u-field-inner {
				/deep/ textarea {
					height: 300rpx !important;
				}
			}
		}
	}
</style>